import React,{Suspense} from 'react'
import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
import { ItemType } from '../terface/teface'
import List from '../component/list'
function Routerview(props: any) {
    const { routes } = props
    const location = useLocation()
    // 判断路由权限
    function Beforechang({ children }: { children: JSX.Element | any }): JSX.Element {
        let token = localStorage.getItem('token')
        if (!token && location.pathname !== '/long') {
            return <Navigate to='/long'></Navigate>
        }
        return children
    }
    function RoutedMap(routes: ItemType[]): any {
        return routes.length > 0 && routes.map((v, i) => {
            return (
                v.path ? <Route key={i} path={v.path} element={<Beforechang>{v.element}</Beforechang>}>
                    {v.children && RoutedMap(v.children)}
                </Route>
                    : <Route key={i} path={v.from} element={<Navigate to={(v.to as string)}></Navigate>}></Route>
            )

        })

    }
    return (
        <Suspense fallback={<List/>}>
        <Routes>
            {RoutedMap(routes)}
        </Routes>
        </Suspense>
    )
}

export default Routerview
